<div class="main_content monitoring export white_design">
    <monitoring-tabs></monitoring-tabs>
    <div class="tab-content">
        <h2 i18n="@@export.export">Export</h2>
        <div class="filter_line">
        <div class="filter_block">
        <filter-generator [schema]="filterSchema" [model]="filterObject" (submit)="onSubmit($event)" (onChange)="onFormChange($event)"></filter-generator>
        <div class="filter">
            <div class="filter_block auto_reloader">
                <table>
                    <tr *ngFor="let status of Object.keys(statusValues)" [ngClass]="{'gray':statusValues[status]?.count == '0','red':statusValues[status]?.count=='!'}">
                        <td>{{statusValues[status].text}}:</td>
                        <td *ngIf="!statusValues[status]?.loader">{{statusValues[status]?.count}}</td>
                        <td *ngIf="statusValues[status]?.loader"><i class="fa fa-circle-o-notch fa-spin dashboard_loader"></i></td>
                    </tr>
                </table>
                <div class="option_block">
                    <div class="interval_block">
                        <label i18n="@@interval">Interval:</label>
                        <input type="text" i18n-placeholder="@@placeholder.interval" placeholder="Interval" [(ngModel)]="interval">
                        <span>s</span>
                    </div>
                    <button class="btn-default submit" (click)="toggleAutoRefresh()">
                        <div class="spinnter_container">
                            <span *ngIf="!timer.started" class="glyphicon glyphicon-refresh"></span>
                            <mat-progress-spinner *ngIf="timer.started" mode="indeterminate" [diameter]="20" ></mat-progress-spinner>
                        </div>
                        <span *ngIf="!timer.started">{{timer.startText}}</span>
                        <span *ngIf="timer.started">{{timer.stopText}}</span>
                    </button>
                </div>
                </div>
                </div>
            </div>
        </div>
        <div class="filter_line" [permission]="{id:'action-monitoring->export-all_action',param:'visible'}">
<!--            <div class="morefunctionblock">
                <div class="w45percent">
                    <mat-select [(ngModel)]="allAction" placeholder="All actions" (selectionChange)="allActionChanged($event)" floatPlaceholder="never">
                        <mat-option value="{{actions.value}}" *ngFor="let actions of allActionsActive">{{actions.label}}</mat-option>
                    </mat-select>
                </div>
                <div class="w45percent csv_button"><span class="custom_icon csv_icon"></span>Download CSV</div>
            </div>-->
            <div class="filter single_block">
                <div class="filter_block">
                    <div class="line">
                        <div (click)="downloadCsv()" class="w45percent csv_button"><span class="custom_icon csv_icon"></span><span class="text" i18n="@@download_csv">Download CSV</span></div>
                        <div (click)="uploadCsv()" class="w45percent csv_button"><span class="material-icons">file_upload</span><span class="text" i18n="@@upload_csv">Upload CSV</span></div>
                    </div>
                </div>
                <div class="filter_block">
                    <div class="line">
                        <mat-select class="pull-left"  [(ngModel)]="allAction" i18n-placeholder="@@placeholder.all_actions" placeholder="All actions" (selectionChange)="allActionChanged($event)" floatPlaceholder="never">
                            <mat-option value="{{actions.value}}" *ngFor="let actions of allActionsOptions">{{actions.label}}</mat-option>
                        </mat-select>
                        <div class="checkbox_button pull-right" [ngClass]="{'active':batchGrouped}"><mat-checkbox [(ngModel)]="batchGrouped" (ngModelChange)="bachChange($event)" i18n="@@batch_id_grouped">Batch ID grouped</mat-checkbox></div>
                    </div>
                </div>
            </div>
        </div>
        <ng-container *ngIf="batchGrouped">
            <button class="left_arrow arrow no_style"  i18n-title="@@title.preview_page" title="Preview page" *ngIf="_.size(matches) > 0" [disabled]="!hasNewer(externalRetrieveEntries)" [ngClass]="{'active':hasNewer(externalRetrieveEntries)}" (click)="getCounts(newerOffset(externalRetrieveEntries))">
                <span class="glyphicon glyphicon glyphicon-chevron-left"></span>
            </button>
            <button class="right_arrow arrow no_style" i18n-title="@@title.next_page" title="Next page" *ngIf="_.size(matches) > 0" [disabled]="!hasOlder(externalRetrieveEntries)" [ngClass]="{'active':hasOlder(externalRetrieveEntries)}" (click)="getCounts(olderOffset(externalRetrieveEntries))">
                <span class="glyphicon glyphicon glyphicon-chevron-right"></span>
            </button>
        </ng-container>
        <ng-container *ngIf="!batchGrouped">
            <button class="left_arrow arrow no_style"  i18n-title="@@title.preview_page" title="Preview page" *ngIf="_.size(matches) > 0"  [disabled]="!hasNewer(matches)" [ngClass]="{'active':hasNewer(matches)}" (click)="search(newerOffset(matches))">
                <span class="glyphicon glyphicon glyphicon-chevron-left"></span>
            </button>
            <button class="right_arrow arrow no_style" i18n-title="@@title.next_page" title="Next page" *ngIf="_.size(matches) > 0" [disabled]="!hasOlder(matches)" [ngClass]="{'active':hasOlder(matches)}" (click)="search(olderOffset(matches))">
                <span class="glyphicon glyphicon glyphicon-chevron-right"></span>
            </button>
        </ng-container>
        <table class="table table-bordered table-condensed" *ngIf="_.size(matches) > 0">
            <thead>
            <tr *ngIf="batchGrouped">
                <th>
                </th>
                <th width="3%"></th>
                <th i18n="@@batch_id">Batch ID</th>
                <th class="hideOn1200px" i18n="@@remote_aet">Remote AET</th>
                <th class="hideOn1100px" i18n="@@destination_aet">Destination AET</th>
                <th class="hideOn1100px" i18n="@@scheduled_time_range">Scheduled Time Range</th>
                <th class="hideOn1100px" i18n="@@processing_start_time_range">Processing Start Time Range</th>
                <th class="hideOn1100px" i18n="@@processing_end_time_range">Processing End Time Range</th>
                <th class="hideOn1100px" i18n="@@tasks">Tasks</th>
            </tr>
            <tr *ngIf="!batchGrouped">
                <th>
                </th>
                <th (mouseenter)="tableMousEnter()" (mouseleave)="tableMousLeave()">
                    <div class="action_block">
                        <input type="checkbox" (change)="checkAll($event)">
                        <a [permission]="{id:'action-monitoring->export-single_action',param:'visible'}" class="text-white" (click)="$event.preventDefault();executeAll('cancel')" href="" i18n-title="@@title.cancel_selected" title="Cancel selected">
                            <span class="glyphicon glyphicon-ban-circle"></span>
                        </a>
                        <a [permission]="{id:'action-monitoring->export-single_action',param:'visible'}" class="text-white" (click)="$event.preventDefault();executeAll('reschedule')" href="" i18n-title="@@title.reschedule_selected" title="Reschedule selected">
                            <span class="glyphicon glyphicon-repeat"></span>
                        </a>
                        <a [permission]="{id:'action-monitoring->export-single_action',param:'visible'}" class="text-white" (click)="$event.preventDefault();executeAll('delete')" href="" i18n-title="@@title.delete_selected" title="Delete selected">
                            <span class="glyphicon glyphicon-remove-circle"></span>
                        </a>
                    </div>
                </th>
                <th i18n="@@modality">Modality</th>
                <th i18n="@@study_uid">Study UID</th>
                <th i18n="@@nr_inst" i18n-title="@@title.export.number_of_instances" title="Number of instances">Nr.Inst. </th>
                <th i18n="@@exporter_id" i18n-title="@@title.export.export_task_id" title="Export Task ID">Exporter ID</th>
                <th i18n="@@status">Status</th>
                <th i18n="@@failures">Failures</th>
                <th i18n="@@queue_time" i18n-title="@@scheduled_time" title="Scheduled Time">Queue time</th>
                <th i18n="@@export_time" i18n-title="@@title.export.processing_duration" title="Processing duration">Export time</th>
                <th i18n="@@device_name">Device name</th>
            </tr>
            </thead>
            <tbody>
            <ng-container *ngFor="let match of matches">
                <tr *ngIf="batchGrouped">
                    <td [attr.rowspan]="(match.showProperties ? 2 : 1)" [innerHtml]="match.offset+1+'.'"></td>
                    <td  (mouseenter)="tableMousEnter()" (mouseleave)="tableMousLeave()">
                        <a (click)="$event.preventDefault();match.showProperties = !match.showProperties" href="" i18n-title="@@show_properties" title="Show Properties">
                            <span class="glyphicon glyphicon-list"></span>
                        </a>
                        <a class="text-white" (click)="$event.preventDefault();showTaskDetail(match)" href="" i18n-title="@@title.export.show_tasks_detail" title="Show Tasks Detail">
                            <span class="glyphicon glyphicon-list-alt"></span>
                        </a>
                        <a [permission]="{id:'action-monitoring->export-single_action',param:'visible'}" (click)="$event.preventDefault();deleteBatchedTask(match)" href="" i18n-title="@@title.delete_task_with_this_batchid" title="Delete Task with this BatchID">
                            <span class="glyphicon glyphicon-remove-circle"></span>
                        </a>
                    </td>
                    <td [innerHtml]="match.properties.batchID" title="{{match.properties.batchID}}"></td>
                    <td [innerHtml]="match.properties.RemoteAET" class="hideOn1200px"></td>
                    <td [innerHtml]="match.properties.DestinationAET" class="hideOn1100px"></td>
                    <td [innerHtml]="match.properties.scheduledTimeRange" class="hideOn1100px"></td>
                    <td [innerHtml]="match.properties.processingStartTimeRange" class="hideOn1100px"></td>
                    <td [innerHtml]="match.properties.processingEndTimeRange" class="hideOn1100px"></td>
                    <td class="hideOn1100px no-padding" width="30%"><stacked-progress [model]="match.properties.tasks"></stacked-progress></td>
                </tr>
                <tr *ngIf="!batchGrouped">
                    <td [attr.rowspan]="(match.showProperties ? 2 : 1)" [innerHtml]="match.offset+1+'.'"></td>
                    <td (mouseenter)="tableMousEnter()" (mouseleave)="tableMousLeave()">
                        <input type="checkbox" [(ngModel)]="match.checked">
                        <a (click)="$event.preventDefault();match.showProperties = !match.showProperties" href="" i18n-title="@@show_properties" title="Show Properties">
                            <span class="glyphicon glyphicon-list"></span>
                        </a>
                        <a [permission]="{id:'action-monitoring->export-single_action',param:'visible'}" *ngIf="((match.properties.status && match.properties.status === 'SCHEDULED') || (match.properties.status && match.properties.status === 'IN PROCESS'))" (click)="$event.preventDefault();cancel(match)" href="" i18n-title="@@title.cancel" title="Cancel">
                            <span class="glyphicon glyphicon-ban-circle"></span>
                        </a>
                        <a [permission]="{id:'action-monitoring->export-single_action',param:'visible'}" (click)="$event.preventDefault();reschedule(match)" href="" i18n-title="@@title.reschedule" title="Reschedule">
                            <span class="glyphicon glyphicon-repeat"></span>
                        </a>
                        <a [permission]="{id:'action-monitoring->export-single_action',param:'visible'}" (click)="$event.preventDefault();delete(match)" href="" i18n-title="@@title.delete" title="Delete">
                            <span class="glyphicon glyphicon-remove-circle"></span>
                        </a>
                    </td>
                    <td [innerHtml]="match.properties.Modality"></td>
                    <td [innerHtml]="match.properties.StudyInstanceUID"></td>
                    <td [innerHtml]="match.properties.NumberOfInstances" ></td>
                    <td [innerHtml]="match.properties.ExporterID"></td>
                    <td [innerHtml]="match.properties.status" title="{{match.properties.outcomeMessage}}"></td>
                    <td [innerHtml]="match.properties.failures" title="{{match.properties.errorMessage}}"></td>
                    <td class="text-right" [innerHtml]="getDifferenceTime(match.properties.scheduledTime,match.properties.processingStartTime)"></td>
                    <td class="text-right" [innerHtml]="getDifferenceTime(match.properties.processingStartTime,match.properties.processingEndTime,'sec')"></td>
                    <td [innerHtml]="match.properties.dicomDeviceName"></td>
                </tr>
                <tr *ngIf="match.showProperties">
                    <td colspan="11">
                        <table class="table table-bordered table-condensed attribute_list">
                            <tr *ngFor="let key of Object.keys(match.propertiesAttr)">
                                <th [innerHtml]="key"></th>
                                <td [innerHtml]="match.propertiesAttr[key]"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr [hidden]="true"></tr>
            </ng-container>
            </tbody>
        </table>
    </div>
</div>